<template>
    <div class="real-time flex-aic">
        <div class="item" v-for="item in list" :key="item.title" :style="{backgroundImage: `url(${item.background})`}">
            <div class="header flex-aic">
                <div class="titile">{{item.title}}</div>
                <div class="tag flex-center">今日</div>
            </div>
            <div class="num">{{item.num}}</div>
            <div class="days flex-aic">
                <div>昨日{{item.yesterday}}</div>
                <div>日环比{{item.today}}</div>
            </div>
            <div class="total flex-aic flex-jub">
                <div>{{item.totalKey}}</div>
                <div>{{item.totalValue}}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
/**
 * 工作台首页，顶部四个卡片，
 * TODO 底部内容太靠下不用管，因为图片没切好，有白边，实际上位置是正确的
 */

import {ref} from 'vue'
const list = ref([
    {title: '销售额', num: 99, yesterday: 88.88, today: '11.11%', background: 'https://s21.ax1x.com/2024/05/09/pkV5zi8.png', totalKey: '本月销售额', totalValue: '9999.99元'},
    {title: '用户访问量', num: 99, yesterday: 88.88, today: '11.11%', background: 'https://s21.ax1x.com/2024/05/09/pkVISJS.png', totalKey: '本月访问量', totalValue: 'PV10000'},
    {title: '订单量', num: 99, yesterday: 88.88, today: '11.11%', background: 'https://s21.ax1x.com/2024/05/09/pkVIpRg.png', totalKey: '本月订单量', totalValue: '9999单'},
    {title: '新增用户', num: 99, yesterday: 88.88, today: '11.11%', background: 'https://s21.ax1x.com/2024/05/09/pkVIPMj.png', totalKey: '本月新增用户', totalValue: '9999人'},
])
</script>

<style scoped lang="scss">
.real-time{

    display: flex;
    align-items: center;
    .item{
        border-radius: 10px;
        flex: 1;
        aspect-ratio: 1.79;
        background-size: cover;
        background-position: center;
        padding: 1.17rem;
        font-size: 0.93rem;
        color: #fff;
        &:nth-child(2){
            margin-left: 3rem;
            margin-right: 1.5rem;
        }
        &:nth-child(3){
            margin-left: 1.5rem;
            margin-right: 3rem;
        }
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.52rem;
            .tag{
                border-radius: 10px 10px 10px 10px;
                border: 1px solid #FFFFFF;
                width: 4.1rem;
                height: 1.75rem;
            }
        }
        .num{
            font-size: 1.87rem;
            margin-bottom: 0.58rem;
        }
        .days{
            margin-bottom: 1.75rem;
            div{
                &:nth-child(1){
                    margin-right: 1.17rem;
                }
            }
        }
    }
}
</style>